<template>
	<view class="container">
		<view style="width: 100%;height: var(--status-bar-height)"></view>
		<view class="content col_between">
			<view class="head col_center">
				<image class="img" src="../../static/img/logo.png" mode="heightFix"></image>
				<view class="title">{{$t('会员登录')}}</view>
			</view>
			<u-transition :show="true" mode="slide-right" duration="500">
				<view class="form">
					<view class="form_item flex">
						<u--input :placeholder="$t('请输入账户')" border="none" clearable v-model="account" fontSize="36rpx"
							type="number"></u--input>
					</view>
					<view class="form_item flex">
						<u--input :placeholder="$t('请输入密码')" border="none" clearable v-model="password" fontSize="36rpx"
							type="password"></u--input>
					</view>
				</view>
				<view class="status flex_between">
					<view class="status_item flex">
						<u-switch v-model="rememberAccount" activeColor="#4c3d89" inactiveColor="#a5a5a5"></u-switch>
						<text>{{$t('记住账户')}}</text>
					</view>
					<view class="status_item flex">
						<u-switch v-model="rememberPassword" activeColor="#4c3d89" inactiveColor="#a5a5a5"></u-switch>
						<text>{{$t('记住密码')}}</text>
					</view>
				</view>
				<view class="button flex_center" @tap="login">
					<image src="../../static/img/button.png" mode="widthFix" style="width: 44rpx;height: 44rpx;">
					</image>
					<view class="button_text">{{$t('会员登录')}}</view>
				</view>
				<view class="privacy flex">
					<view class="status_box flex_center" :class="agreeStatus?'agree_status':''" @tap="agree">
						<u-icon name="checkbox-mark" :color="agreeStatus?'#e1e1e1':'#0a0b24'"></u-icon>
					</view>
					<text>{{$t('已阅读并同意')}}</text>
					<text style="color: #57a4da;" @tap="toAgree">{{$t('《隐私协议》')}}</text>
				</view>
			</u-transition>
			<view class="option flex_between">
				<view class="opt_item" @tap="toPath('/pages/register/register')">{{$t('注册会员')}}</view>
				<!-- <view class="opt_item" @tap="toPath('/pages/forget/forget')">{{$t('忘记密码')}}</view> -->
				<view class="copyright">
					Version number:1.15.1.2
				</view>
			</view>
		</view>
		<view class="serve_box col_center" @tap="openServe">
			<view class="serve flex_center">
				<u-icon name="kefu-ermai" color="#fff" size="28"></u-icon>
			</view>
			<view class="text">{{$t('联系客服')}}</view>
		</view>
	</view>
</template>

<script>
	import {
		loginApi
	} from "@/api/api.js"
	export default {
		data() {
			return {
				account: "",
				password: "",
				rememberAccount: false,
				rememberPassword: false,
				//checked:true,
				agreeStatus: false,
			};
		},
		onLoad() {
			// 从本地存储中恢复记住账户和记住密码的状态
			let info = uni.getStorageSync("info")
			this.account = info.key1 || ""
			this.password = info.key2 || ""
			if (this.account != '') {
				this.rememberAccount = true
			}
			if (this.password != '') {
				this.rememberPassword = true
			}
		},
		methods: {
			openServe() {
				console.log("打开客服")
			},
			//toLogin() {},
			toPath(url) {
				uni.navigateTo({
					url
				})
			},
			agree() {
				this.agreeStatus = !this.agreeStatus
			},
			login() {
				if (!this.account) {
					uni.$u.toast(this.$t('请输入账号'))
					return
				}
				if (!this.password) {
					uni.$u.toast(this.$t('请输入密码'))
					return
				}
				if (!this.agreeStatus) {
					uni.$u.toast(this.$t('请先阅读并勾选《隐私协议》'))
					return
				}

				let data = {
					user: this.account,
					password: this.password,
					//agreeStatus:this.agreeStatus,
				}
				loginApi(data).then(res => {
					console.log(res.data)
					uni.setStorageSync("token", res.data.data.token)
					let info = {}
					if (this.rememberAccount) {
						info.key1 = this.account
					}
					if (this.rememberPassword) {
						info.key2 = this.password
					}
					uni.setStorageSync('info', info);
					uni.showToast({
						title: res.data.msg,
						icon: "none",
						success: () => {
							setTimeout(() => {
								uni.reLaunch({
									url: "/pages/home/home"
								})
							}, 500)
						}
					})
				})
			},
			checkLogin() {
				const account = uni.getStorageSync('account');
				const password = uni.getStorageSync('password');
				if (account || password) {
					this.account = account;
					this.password = password;
					this.rememberAccount = true;
					this.rememberPassword = true;
				}
			},
			toAgree() {
				uni.navigateTo({
					url: '/pages/agreement/agreement'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		padding-bottom: 0;

		.content {
			flex: 1;

			.head {
				width: 100%;
				flex: 1;

				.img {
					height: 190rpx;
				}

				.title {
					font-size: 44rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #fff;
					margin-top: 22rpx;
				}
			}

			.form {
				background: #e1e1e1;
				border-radius: 20rpx;
				margin: 0 74rpx;

				.form_item {
					padding: 0 20rpx 0 34rpx;
					height: 100rpx;

					&:nth-child(1) {
						border-bottom: 1px solid #999;
					}
				}

			}

			.status {
				margin-top: 24rpx;
				height: 50rpx;
				padding: 0 74rpx;

				uni-text {
					padding-left: 10rpx;
					font-size: 36rpx;
					color: #fff;
				}
			}

			.button {
				margin-bottom: 44rpx;
				height: 110rpx;
				background: #4c3d89;
				border-radius: 54rpx;
				margin: 56rpx 74rpx 0;

				.button_text {
					padding-left: 36rpx;
					font-size: 36rpx;
					font-weight: 500;
					color: #fff;
				}
			}

			.privacy {
				height: 94rpx;
				margin: 0 74rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #fff;

				.status_box {
					width: 36rpx;
					height: 36rpx;
					margin: 0 5px;
					border: 1rpx solid #686866;
				}

				.agree_status {
					background: #4c3d89;
					border-color: #4c3d89;
				}
			}

			.option {
				padding: 50rpx 80rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #fff;
				flex-wrap: wrap;

				.opt_item {
					height: 80rpx;
					line-height: 80rpx;
				}

				.copyright {
					width: 100%;
					font-size: 28rpx;
					font-weight: 500;
					color: grey;
					text-align: right;
				}
			}
		}

	}

	.serve_box {
		position: fixed;
		top: 60rpx;
		right: 40rpx;

		.serve {
			background: #a5a5a5;
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
		}

		.text {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #fff;
			margin-top: 6rpx
		}
	}
</style>